<template>
  <div>
    <div class="box registerBox" v-if="showLogin === true">
      <div class="title">
        <span class="t1">
          注册
        </span>
        <div class="t2" @click="closeLogin()">
          X
        </div>
      </div>
      <el-form :rules="rules" :label-position="labelPosition" :model="registerForm" ref="registerForm">
        <el-form-item label="用户名" prop="userName" style="height: 60px">
          <el-input v-model="registerForm.userName" placeholder="用户名长度在5~20之间"></el-input>
        </el-form-item>

        <el-form-item label="QQ号码" prop="nickName" style="height: 60px">
          <el-input v-model="registerForm.nickName"></el-input>
        </el-form-item>

        <el-form-item label="密码" prop="password" style="height: 60px">
          <el-input type="password" v-model="registerForm.password"></el-input>
        </el-form-item>

        <el-form-item label="重复密码" prop="password2" style="height: 60px">
          <el-input type="password" v-model="registerForm.password2"></el-input>
        </el-form-item>

        <el-form-item label="邮箱" prop="email" style="height: 60px">
          <el-input v-model="registerForm.email"></el-input>
        </el-form-item>

        <el-row class="btn" style="margin-top: 20px">
          <el-button class="loginBtn" type="primary" @click="startRegister">注册</el-button>
          <el-button class="registerBtn" type="info" @click="goLogin">返回登录</el-button>
        </el-row>

        <div class="loginTip">填写QQ号是为了绑定若兮账号,使用QQ第三方登录哦~</div>
        <div class="loginTip" style="margin-top: 0px">注册成功后，会发送邮件通知~</div>
      </el-form>
    </div>

    <div class="mask"></div>

  </div>
</template>

<script>
export default {
	name: 'register',
	data() {
		return {
			captchaOption: {
				// 各平台的参数，具体请参阅个平台文档
				// 以下为腾讯验证码的参数
				// appid: '',
				// 以下为极验验证码的参数
				product: 'bind',
			},
			loading: null,
			option: {
				fullscreen: true,
				lock: true
			},
			showLogin: true,
			dialog: false,
			labelPosition: 'right',
			registerForm: {
				userName: '',
				nickName: '',
				password: '',
				password2: '',
				email: ''
			},
			registerData: {
				username: '',
				password: '',
				qqNumber: '',
				phoneNumber: '',
				email: ''
			},
			loginRules: {
				userName: [
					{required: true, message: '请输入用户名', trigger: 'blur'},
					{min: 5, message: '用户名长度大于等于 5 个字符', trigger: 'blur'},
					{max: 20, message: '用户名长度不能大于 20 个字符', trigger: 'blur'}
				],
				password: [
					{required: true, message: '请输入密码', trigger: 'blur'},
					{min: 5, message: '密码长度需要大于等于 5 个字符', trigger: 'blur'},
					{max: 20, message: '密码长度不能大于 20 个字符', trigger: 'blur'}
				]
			},
			rules: {
				userName: [
					{required: true, message: '请输入用户名', trigger: 'blur'},
					{min: 5, message: '用户名不小于5字符', trigger: 'blur'},
					{max: 20, message: '用户名不大于20字符', trigger: 'blur'}
				],
				nickName: [
					{required: true, message: '请输入QQ号码', trigger: 'blur'}
				],
				password: [
					{required: true, message: '请输入密码', trigger: 'blur'},
					{min: 5, message: '密码不小于5个字符', trigger: 'blur',position: 'right'},
					{max: 20, message: '密码不大于20个字符', trigger: 'blur'}
				],
				password2: [
					{required: true, message: '请再次输入密码', trigger: 'blur'},
					{min: 5, message: '密码不小于5个字符', trigger: 'blur'},
					{max: 20, message: '密码不大于20个字符', trigger: 'blur'}
				],
				email: [
					{required: true, message: '邮箱不能为空', trigger: 'blur'},
					{pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/, message: '请输入正确的邮箱'}
				]
			}
		}
	},
	created() {
	},
	methods: {
		// 回调监听
		// status: 1成功,2验证中,0失败
		// res: 三方返回的原始数据
		captchaNotice(status, res){
			console.log(status)
			console.log(res)
		},
		startRegister: function () {
			this.$refs.registerForm.validate((valid) => {
				if (!valid) {
					console.log('校验失败')
				} else {
					let passWord = this.registerForm.password
					let passWord2 = this.registerForm.password2
					if (passWord !== passWord2) {
						this.$message({
							type: 'error',
							message: '两次密码不一致',
							center: true
						})
						return
					}
					var vm = this
          vm.registerData.phoneNumber = localStorage.getItem('phoneNumber')
					vm.axios({
						method: 'POST',
						url: this.GLOBAL.baseURLUser+'user/register',
						data: { username: vm.registerForm.userName,
            password: vm.registerForm.password,
            qqNumber: vm.registerForm.nickName,
            phoneNumber: vm.registerData.phoneNumber,
            email: vm.registerForm.email}
					}).then(function(resp) {
						if (resp.data.status === 'ok') {
							vm.$message({
								message: resp.data.message,
								type: 'success',
								center: true
							})
							vm.$router.push({ name: 'login'})
						} else {
							vm.$message({
								message: resp.data.message,
								type: 'error',
								center: true
							})
						}
					})
				}
			})
		},
		goLogin: function () {
			this.$router.push({ name: 'login'})
		},
		closeLogin: function () {
			this.showLogin = false
		}
	}
}
</script>

<style>
  .el-form-item--small .el-form-item__error {
    margin-top: 2px;
  }
  .el-form-item__error {
    position: absolute !important;
    top:10px;
    left: 130px;
    text-align: center;
    background-color: rgba(255, 0, 0, 0);
    filter: alpha(Opacity=40);
    opacity: 0.8;
    width: 120px;
    height: 21px;
    border-radius: 2px;
    font-size: 12px;
    color: #ea788e;
    line-height: 21px;
    z-index: 99;
  }  .box {
    width: 400px;
    height: 420px;
    background: white;
    position: fixed;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 101; /* 要比遮罩层大 */
  }

  .registerBox {
    height: 560px;
  }

  .box .title {
    height: 48px;
    font-size: 22px;
    font-weight: bold;
    text-align: center;
    line-height: 48px;
  }
  .box .title .t2 {
    font-size: 16px;
    float: right;
    margin-right: 6px;
    margin-top: -6px;
    cursor: pointer;
  }

  .box .el-divider--horizontal {
    margin: 12px 0;
  }

  .box .el-form-item__label {
    margin-left: 10px;
    font-size: 16px;
  }

  .box .el-input__inner {
    margin-left: 10px;
    width: 90%;
  }

  .box .btn {
    text-align: center;
  }

  .box .loginBtn {
    width: 40%;
  }

  .box .registerBtn {
    width: 40%;
  }

  .elRow {
    margin-top: 15px;
    text-align: center;
  }

  .loginTip {
    margin-top: 10px;
    font-size: 14px;
    text-align: center;
    color: #bababa;
  }

  .remarksBox {
    position: fixed;
    left: 50%;
    margin-left: -100px;
    top: 50%;
    margin-top: -50px;
    border: 1px solid red;
    width: 200px;
    height: 100px;
    text-align: center;
    z-index: 101; /* 要比遮罩层大 */
  }

  /* 遮罩层 */
  .mask {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 100;
  }
</style>
